import { Card } from 'antd';
import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

export default function StatisticsPage() {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const chart = echarts.init(chartRef.current);
      const option = {
        color: ['#4CAF50'],
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { type: 'value' },
        series: [{
          data: [5, 8, 6, 9, 7, 10, 8],
          type: 'line',
          smooth: true,
          areaStyle: { color: '#E8F5E9' }
        }]
      };
      chart.setOption(option);
      return () => chart.dispose();
    }
  }, []);

  return (
    <div style={{ padding: 24 }}>
      <Card title="习惯完成趋势" style={{ borderRadius: 12 }}>
        <div ref={chartRef} style={{ height: 400 }} />
      </Card>
    </div>
  );
}